<template>
  <view class="content">
    <view class="header-top pd20">
      <!-- <view class="logo">赤兔工作室</view> -->
      <!-- <icon type="search"></icon> -->
    </view>
    <view class="pd20">
      <view class="user-data">
        <h4 class="user-data-title">最纯粹的单词学习工具！</h4>
        <!-- <view class="user-data-list">
          <text class="left">昨日单词 {{ yesterdayWords }}</text>
          <text class="right">排名 {{ rank }}</text>
          <text class="left">本周单词 {{ weekWords }}</text>
          <a class="right" href="#">查看详情</a>
        </view> -->
      </view>
    </view>
    <view class="lessons">
      <h4 class="lesson-title pd20">我的课程</h4>
      <scroll-view scroll-x="true">
        <view class="lession-list">
          <LessonItem
            v-for="item in myLessonList"
            :key="item.id"
            :itemInfo="item"
            mode="widthFix"
            @click.native="onLinkLesson(item)"
          />
          <!-- :url="`/pages/lessonDetail/index?id=${item.id}&name=${item.name}&dis=${item.description}`" -->
        </view>
      </scroll-view>
    </view>
    <view class="lessons">
      <h4 class="lesson-title pd20">所有课程</h4>
      <view class="lesson-all">
        <!-- <scroll-view scroll-x="true">
          <view class="lesson-category">
            <view
              class="category-item pd20"
              :class="{ active: index === currentCategory }"
              :key="index"
              v-for="(lessonName, index) in allLessonsName"
              @click="categoryClick(index)"
              >{{ lessonName }}</view
            >
          </view>
        </scroll-view> -->
        <scroll-view scroll-x="true">
          <view class="lession-list">
            <LessonItem
              v-for="item in allLessons"
              :key="item.id"
              :itemInfo="item"
              mode="widthFix"
              @click.native="onFocusLesson(item.id)"
            />
            <!-- :url="`/pages/lessonDetail/index?id=${item.id}&name=${item.name}&dis=${item.description}`" -->
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
import LessonItem from "../../components/lesson/LessonItem";
import util from "../../util/util";
// import VConsole from 'vconsole'
// const vConsole = new VConsole()
export default {
  components: {
    LessonItem,
  },
  data() {
    return {
      allLessons: [],
      yesterdayWords: 0,
      weekWords: 0,
      rank: 1,
      myLessonList: [],
    };
  },
  onLoad() {
    this.login();
    this.getAllCourses();
    this.getMyCourses();
  },
  methods: {
    categoryClick(index) {
      if (index === this.currentCategory) return;
      this.currentCategory = index;
    },
    async getAllCourses() {
      const res = await util.request({
        url: "/api/courses/",
      });
      // console.log(res)
      this.allLessons = res.data.data;
    },
    async getMyCourses() {
      const res = await util.request({
        url: `/api/user_focus_courses/`,
      });
      this.myLessonList = res.data.data;
    },
    async login() {
      const { code } = await util.login();
      const { encryptedData, iv } = await util.getUserInfo();
      const response = await util.request({
        url: "/api/login/",
        data: {
          code,
          encryptedData,
          iv,
        },
      });
      const { data, token } = response.data;
      // console.log(data);
      // 个人关注课程
      // this.myLessonList = data.focus_courses
      await util.setStorage("token", token);
      await util.setStorage("user_info", data);
    },

    onFocusLesson(id) {
      wx.showModal({
        content: "是否加入我的课程？",
        success: async (res) => {
          if(res.confirm) {
            const response = await util.request({
              url: "/api/user_focus_course/" + id,
            });

            const {message} = response.data

            wx.showToast({
              icon: "success",
              title: message
            })

            this.getMyCourses()
          }
        }
      })
    },

    onLinkLesson(item) {
      uni.navigateTo({
        url: `/pages/lessonDetail/index?id=${item.id}&name=${item.name}&dis=${item.description}`
      })
    }
  },
  onShareAppMessage: function () {
      return {
        title: '好用的英语单词记忆练习工具-赤兔英语',
        path: '/pages/index/index'
      }
    },

    onShareTimeline: function () {
      return {
        title: '好用的英语单词记忆练习工具-赤兔英语',
        path: '/pages/index/index'
      }
    }
};
</script>

<style>
.content {
  color: #3f3f3f;
}
.header-top {
  display: flex;
}
.logo {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.user-data {
  line-height: 1.8;
  /* border-top: 2px dashed #5eced3;
  border-bottom: 2px dashed #5eced3; */
  border: 1px dashed #5eced3;
  border-radius: 10rpx;
  padding: 20rpx;
}
.user-data-list {
  display: flex;
  flex-wrap: wrap;
}
.user-data-list .left,
.user-data-list .right {
  width: 50%;
}
.user-data-list .right {
  text-align: right;
}
.lession-list {
  display: flex;
}
.lesson-item {
  width: 350rpx;
  padding: 12rpx;
}
.lesson-category {
  display: flex;
}
.category-item.active {
  color: #5eced3;
}
</style>
